<template>
  <a-card :body-style="{ padding: '24px 32px' }">
    <icon-selector v-model="currentSelectedIcon" @change="handleIconChange" />

    <a-divider />
    <p>测试 IconSelector 组件 v-model 功能</p>
    <a-button @click="changeIcon('down')">改变 Icon-down</a-button>
    <a-divider type="vertical" />
    <a-button @click="changeIcon('cloud-download')"
      >改变 Icon-cloud-download
    </a-button>
  </a-card>
</template>

<script>
import IconSelector from "@/components/IconSelector";

export default {
  name: "IconSelectorView",
  components: {
    IconSelector,
  },
  data() {
    return {
      currentSelectedIcon: "pause-circle",
    };
  },
  methods: {
    handleIconChange(icon) {
      this.$message.info(
        <span>
          选中图标 <code>{icon}</code>
        </span>
      );
    },
    changeIcon(type) {
      this.currentSelectedIcon = type;
    },
  },
};
</script>